<template>
  <div class="like m1200">
    <div class="tab">
      <div class="title">猜你喜欢</div>
      <a class="change" ref="###">换一换</a>
    </div>
    <div class="goods">
      <ul class="goodsBox" ref="goodsBox">
        <li class="good" v-for="(item, index) in clothes" :key="index">
          <div class="goodImg">
            <img v-lazy="item.src" alt="" />
          </div>
          <div class="goodInfo">
            <div class="title">{{ item.name }}</div>
            <div class="price">{{ item.price }}</div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "Like",
  data() {
    return {
      clothes: [],
      clotheList: [],
      count: 1
    };
    
  },
  mounted() {
    this.getClothes()
    // this.toBottom()
  },

  methods: {

    //监听页面的滚动
    load() {
      this.count++
      // thi.clothes = this.clotheList.slice(0, this.count * 10)
    },

    // 滚动到最底部
    // toBottom(){
    //     this.$nextTick(()=>{
    //         setInterval(() =>{
    //         //content是div类名
    //         const el = this.$refs.goodsBox;
    //         const offsetHeight = el.offsetHeight;
    //         el.onscroll = () => {
    //           const scrollTop = el.scrollTop;
    //           const scrollHeight = el.scrollHeight;
    //           if ((offsetHeight + scrollTop) - scrollHeight >= -1) {
    //             //每次滚动到底部size+10
    //             console.log("111")
    //           }
    //         }
    //     },2000)
    //     })
    // },

    getClothes() {
      this.$API.reqHomeGoodList().then((res => {
        if(res.code == 200) return this.clothes = res.data.slice(0, 30)
      }))
    }
  }
}
</script>

<style scoped lang="less">
.like {
  .tab {
    display: flex;
    justify-content: space-between;
    margin: 20px;

    .title {
      font-size: 20px;
      line-height: 30px;
      font-weight: bold;
    }

    .change {
      background-image: url(/img/icons.eb262dc2.png);
      width: 80px;
      height: 30px;
      border-radius: 20px;
      background-position: 194px -102px;
      line-height: 30px;
      font-size: 12px;
      font-weight: 400;
      color: #666;
      padding: 0 16px;
      text-align: left;
    }

    .change:hover {
      color: #ef0005;
      cursor: pointer;
    }
  }

  .goods {
    width: 100%;
    .goodsBox {
      display: flex;
      justify-content: space-evenly;
      flex-wrap: wrap;

      .good {
        width: 232px;
        height: 400px;
        background: #fff;
        margin: 4px 0;
        transition: all 0.2s linear;

        .goodImg {
          text-align: center;

          img {
            padding: 10px;
          }
        }

        .goodInfo {
          height: 90px;
          .title {
            padding: 30px;
            font-size: 12px;
          }
          .price {
            text-align: center;
            color: #ef0005;
            font-size: 20px;
          }
        }
      }

      .good:hover {
        box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
        -webkit-transform: translate3d(0, -2px, 0);
        transform: translate3d(0, -2px, 0);
        cursor: pointer;
      }
    }
  }
}
</style>
